 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-col :span="4">
                    <el-input v-model="search.couponName" placeholder="请输入优惠券名称"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="search.clientName" placeholder="请输入客户名称"></el-input>
                </el-col>

                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form>

            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column prop="couponName" label="优惠券名称" width="160px"> </el-table-column>
                <el-table-column prop="coupon.value" label="优惠券金额" width="130px"> </el-table-column>
                <el-table-column prop="clientName" label="客户名称" width="160px"> </el-table-column>
                 <el-table-column prop="couponCode" label="优惠券码" width="160px"> </el-table-column>
                <el-table-column prop="coupon.startTime" label="开始时间" width="160px"> </el-table-column>
                <el-table-column prop="coupon.endTime" label="结束时间" width="160px"> </el-table-column>
                <el-table-column prop="useTime" label="使用时间" width="160px"> </el-table-column>
                <el-table-column prop="orderSn" label="订单编号" width="160px"> </el-table-column>
                <el-table-column prop="createTime" label="记录时间" width="160px"> </el-table-column>

                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">

                        <el-button size="small" @click="deleteInfo(scope.$index,scope.row)" icon="el-icon-delete" type="danger"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[1, 5, 10, 20, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>

        </el-row>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);

export default {
    data() {
        return {
            tableData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            pageNo: 1, pageSize: 5,
            page: {},
            form: { status: '0' },
            search: {},
            formLabelWidth: '80px',
            dialogTableVisible: false
        };
    },
    created: function () {
        this.load();
    },
    methods: {
        //初始化数据
        load() {
            var _this = this;
            console.log(this.search)
            //页面初始化时，加载的方法
            this.$http.post(`coupon/api/couponHistory/queryAllByParam/${this.pageNo}/${this.pageSize}`, this.search).then((response) => {
                    console.log(response.data);
                    _this.tableData = response.data.data.records;
                    _this.total = response.data.data.total;
                });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
             var token = window.localStorage.getItem("token")
            console.log(token)
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNo = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        emptyBtn() {
            this.search = {};
            this.pageNo = 1;
            this.pageSize = 5;
            this.load();
        },
        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    var _this = this;
                    var idList = [row.id]
                    axios.delete('/coupon/api/couponHistory' ,{data: idList} ).then(function (response) {
                            console.log(response);
                            if (response.data.code === 200) {
                                //重新加载数据
                                _this.load();
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        }).catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    }
};
</script>
<style>
</style>
